<template>
	<div>
		<ButtonGroup style="margin:10px 10px">
			<!-- <Button type="success" @click="add">
				新增
			</Button>
			<Button type="warning" @click="updata">
				修改
			</Button> -->
			<Button type="error" @click="deleteClick">
				删除
			</Button>
		</ButtonGroup>
		<Table @on-selection-change="select" style="margin:0 10px;" :loading="loading" border ref="selection" :columns="columns4" :data="MsbdList"></Table>
		<Page :total="pageObj.total" style="margin:10px;" @on-change="jumpPage" />
		<Modal v-model="modal" title="新增" @on-ok="saveBtn">
			<Form :model="formItem" :label-width="80">
				<FormItem label="商品名">
					<Input v-model="formItem.title" placeholder="请输入商品名..." />
				</FormItem>
				<FormItem label="价格">
					<Input v-model="formItem.price" placeholder="请输入价格..." />
				</FormItem>
				<FormItem label="原价">
					<Input v-model="formItem.oldprice" placeholder="请输入原价..." />
				</FormItem>
				<FormItem label="销量">
					<Input v-model="formItem.sales" placeholder="请输入销量..." />
				</FormItem>
				<FormItem label="类别">
					<Input v-model="formItem.type" placeholder="请输入类别..." />
				</FormItem>
				<FormItem label="商品尺寸">
					<Input v-model="shopsize" placeholder="请输入商品尺寸,价格..." />
				</FormItem>
				<FormItem label="说明">
					<Input v-model="formItem.explains" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入内容..."/>
				</FormItem>
			</Form>
		</Modal>
	</div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapState, mapActions, mapMutations } = createNamespacedHelpers("Order");
import axios from 'axios'
export default {
	data() {
		return {
			columns4: [
				{
					type: "selection",
					width: 60,
					align: "center"
				},
				{
					type: "index",
					width: 60,
					align: "center"
                },
                {
					title: "订单编号",
					key: "number"
                },
				{
					title: "商品名",
					key: "goodsname"
                },
                {
					title: "商品ID",
					key: "goodsid"
				},
				{
					title: "单价",
					key: "price"
				},
				{
					title: "数量",
					key: "goodsnum"
				},
				{
					title: "总价",
					key: "totalprice"
                },
                {
					title: "商品属性",  
					key: "gootsattr"
				},
				{
					title: "状态",
					key: "status"
				},
				{
					title: "成交时间",
					key: "time"
				}
			],
			formItem: {},
			shopsize:'',
			modal: false,
			seleform: [],
		};
	},
	methods: {
		...mapActions(["getMsbdList", "jumpPage", "save", "delete"]),
		...mapMutations(["setisupdata"]),
		select(form) {
			this.seleform = form;
		},
		saveBtn(){
			this.save(this.formItem).then(()=>{
				this.seleform=[]
			})
		},
		add() {
			this.modal = true;
			this.setisupdata(false);
			this.formItem = {};
		},
		updata() {
			if (this.seleform.length != 1) {
				this.$Message.warning("请选择一项进行修改!");
				return;
			}
			this.modal = true;
			this.setisupdata(true);
			this.formItem = this.seleform[0];
		},
		deleteClick() {
			if(this.seleform.length==0){
				this.$Message.error('请选择需要删除的项!');
				return
			}
			if(!confirm('确定删除该项吗！')) return
			this.delete(this.seleform).then(()=>{
				this.seleform=[]
			})
		}
  	},
	mounted() {
		this.getMsbdList();
	},
	computed: {
		...mapState(["MsbdList", "loading", "pageObj", "isupdata"])
	}
};
</script>

<style>
</style>
